{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Local Library{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm py-2 px-4 mb-3">
      <a class="navbar-brand fw-bold fs-3" href="{% url 'index' %}">📚 Local Library</a>
      <div class="ms-auto d-flex align-items-center">
        {% if user.is_authenticated %}
          <span class="me-3"><i class="fas fa-user"></i> {{ user.get_username }}</span>
          <a href="{% url 'logout' %}" class="btn btn-outline-primary btn-sm">Logout</a>
        {% else %}
          <a href="{% url 'login' %}" class="btn btn-primary btn-sm">Login</a>
        {% endif %}
      </div>
    </nav>
    <div class="container-fluid">
      <div class="row">
        <!-- 侧边栏 -->
        <nav class="col-md-2 d-none d-md-block sidebar">
          <ul class="sidebar-nav list-group list-group-flush">
            <li class="list-group-item bg-transparent border-0"><a href="{% url 'index' %}"><i class="fas fa-home me-2"></i>Home</a></li>
            <li class="list-group-item bg-transparent border-0"><a href="{% url 'books' %}"><i class="fas fa-book me-2"></i>All Books</a></li>
            <li class="list-group-item bg-transparent border-0"><a href="{% url 'authors' %}"><i class="fas fa-user-edit me-2"></i>All Authors</a></li>
            <li class="list-group-item bg-transparent border-0"><a href="{% url 'my-borrowed' %}"><i class="fas fa-bookmark me-2"></i>My Borrowed</a></li>
            <li class="list-group-item bg-transparent border-0"><a href="{% url 'all-borrowed' %}"><i class="fas fa-list me-2"></i>All Borrowed</a></li>
            {% if user.is_authenticated %}
            <li class="list-group-item bg-transparent border-0">
              <a href="{% url 'user-center' %}"><i class="fas fa-user-circle me-2"></i>我的主页</a>
            </li>
            {% endif %}
          </ul>
        </nav>
        <!-- 主内容区 -->
        <main class="col-md-10 ms-sm-auto px-md-4">
          {% if messages %}
          <div class="messages">
            {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
          </div>
          {% endif %}
          {% block content %}{% endblock %}
        </main>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>
